<?php 
set_time_limit(0);
ini_set("memory_limit", "12M");
if(!isset($_SESSION)) 
{ 
session_start(); 
} 
include_once '../value/value_kr.php';
unset($_SESSION['s_trace']);
unset($_SESSION['m_fromdate']);
unset($_SESSION['m_todate']);
unset($_SESSION['carnumber']);
include_once 'checklogin.php';

$searchdate = date("Y-m-d");
//include '../connection/connection.php';
$m_fromdate = '';
$m_todate = '';
$carnumber = '';
//$listSearch = mysql_query("SELECT cn.id,cof.name,cn.carnumber,cn.car_datetime,cof.pos_x,cof.pos_y,count(cn.carnumber) as solan FROM carnum cn,configcamera cof WHERE cn.id=cof.id and cn.car_datetime > '".$m_fromdate."' and cn.car_datetime < '".$m_todate."' and cn.carnumber like '%".$carnumber."%' GROUP BY cn.carnumber order by cn.car_datetime;");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="../js/jquery.js"></script>

 <link rel="stylesheet" href="../css/jquery-ui.css" />
 <script type="text/javascript" src="../js/jquery-ui.js"></script>
 <script type="text/javascript" src="../js/globalize.js"></script>

<style type="text/css">
.ui-widget-content{
	border:1px solid #4A4A4A;
}	
.ui-spinner-input{
	margin: 0px 20px 0px 4px !important;
}
.ui-spinner{
	vertical-align: top !important;
}
</style>
<script type="text/javascript">
    $(function() {
        $( "#datepickerfrom" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd",
            autoSize: true
        });
        $( "#datepickerto" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd",
            autoSize: true
        });
    });
    $.widget( "ui.spinnerhour", $.ui.spinner, {
        options: {
        	 min : 0,
     	    max : 23,
     	    showOn : 'both'
        },
     
        _parse: function( value ) {
          if ( typeof value === "string" ) {
            // already a timestamp
            if ( Number( value ) == value ) {
              return Number( value );
            }
            return  Globalize.parseInt( value );
          }
          return value;
        },
     
        _format: function( value ) {
          return Globalize.format( value, "d2" );
        }
      });
    
    $.widget( "ui.spinnermunite", $.ui.spinner, {
        options: {
        	 min : 0,
     	    max : 59,
     	    showOn : 'both'
        },
        _parse: function( value ) {
          if ( typeof value === "string" ) {
            // already a timestamp
            if ( Number( value ) == value ) {
              return Number( value );
            }
            return  Globalize.parseInt( value );
          }
          return value;
        },
     
        _format: function( value ) {
          return Globalize.format( value, "d2" );
        }
      });
     

    $(function() {
    	$("#s_hourfrom").spinnerhour();
    	$("#s_hourfrom").bind("keypress",function(event){
    		validateHour(this,event);
    	});
    	$("#s_hourto").spinnerhour();
    	$("#s_hourto").bind("keypress",function(event){
    		validateHour(this,event);
    	});
    	
    	$("#s_munitefrom").spinnermunite();
    	$("#s_munitefrom").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_secondfrom").spinnermunite();
    	$("#s_secondfrom").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_muniteto").spinnermunite();
    	$("#s_muniteto").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	$("#s_secondto").spinnermunite();
    	$("#s_secondto").bind("keypress",function(event){
    		validateMunite(this,event);
    	});
    	
    });

 // validate
    function validateHour(ele,evt)
    {
	     if(evt.keyCode!=8)
	     {
		     var theEvent = evt || window.event;
		     var key = theEvent.keyCode || theEvent.which;
		     key = String.fromCharCode( key );
		     var regex = /[0-9]/;
			
		     if( !regex.test(key) )
		    {
		       theEvent.returnValue = false;
		
		       if(theEvent.preventDefault) theEvent.preventDefault();
		
		     }else{
		    	 //theEvent.preventDefault();
		    	 OnChangeHour(key,ele);
		    	 theEvent.returnValue = false;
		    	 if(theEvent.preventDefault) theEvent.preventDefault();
		     }
	     }
    }
    
    function validateMunite(ele,evt)
    {
	     if(evt.keyCode!=8)
	     {
		     var theEvent = evt || window.event;
		     var key = theEvent.keyCode || theEvent.which;
		     key = String.fromCharCode( key );
		     var regex = /[0-9]/;
		     if( !regex.test(key) )
		    {
		       theEvent.returnValue = false;
		
		       if(theEvent.preventDefault) theEvent.preventDefault();
		
		     }else{
		    	 OnChangeMunite(key,ele);
		    	 theEvent.returnValue = false;
		    	 if(theEvent.preventDefault) theEvent.preventDefault();
		     }
	     }
    }
    
  //onchange from
 	 function OnChangeHour(key,ele){
 	  	 	var value = $(ele).val();
 	  	 	if(value.length>2){
 	  	 		if(value.slice(0,1)==0){
 	  	 			value = value.slice(1);
 	  	 		}
 	  	 	}
 	  	 if(value.length==0){value = "0"+key;}
	  	 else{
	  		value = parseInt(value)+key;
	  	 }
       	if(value < 00){
       		$(ele).val('23');
       	}else if(value > 23 ){
       		$(ele).val('00');
       	}else{
       		$(ele).val(value);
       	}
   }
    
   function OnChangeMunite(key,ele){
   	var value = $(ele).val();
  	 	if(value.length>2){
  	 		if(value.slice(0,1)==0){
  	 			value = value.slice(1);
  	 		}
  	 	}
	  	 if(value.length==0){value = "0"+key;}
	  	 else{
	  		value = parseInt(value)+key;
	  	 }
   	if(value < 00){
   		$(ele).val('59');
   	}else if(value > 59 ){
   		$(ele).val('00');
   	}else{
   		$(ele).val(value);
   	}
   }
    
</script>
    
<script type="text/javascript">
$(document).ready(function(){
	ScrollTable();
	
});
function MyResize(){
	ScrollTable();
}

function ScrollTable(){
	wid = $("table#tablebody").parent().css('width');
	wid = wid.slice(0,-2)-18;
	$("table#tablebody").css("width", wid);
	$("table#tableheader").css("width", wid);
	$('table#tablebody').parent().scrollTop(0);
	OnTRCSS();
}

function OnTRCSS(){
	$("table.tbchung tr:even").each(function(){
		$(this).css("background-color","#eff3fa");
	});
}

</script>
<script type="text/javascript">
function OnSearch(){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	var winH = parseInt(winHf - temp.top - 25);
	
	var carnumber = "";
	if ($('#s_carnum').val()==""){
		$('#s_carnum').focus();
		return;
	}
	carnumber = $('#s_carnum').val();
	var m_fromdate = $('#datepickerfrom').val();
	var l_from = "";
	if ($('#s_hourfrom').val() != "" && isNaN($('#s_hourfrom').val())== false){
		l_from = $('#s_hourfrom').val();
	}else{
		l_from = "00";
	}
	if ($('#s_munitefrom').val() != "" && isNaN($('#s_munitefrom').val())== false){
		l_from += ":"+$('#s_munitefrom').val();	
	}else{
		l_from += ":00";
	}
	if ($('#s_secondfrom').val() != "" && isNaN($('#s_secondfrom').val())== false){
		l_from += ":"+$('#s_secondfrom').val();	
	}else{
		l_from += ":00";
	}
	var m_todate = $('#datepickerto').val();
	var l_to = "";
	if ($('#s_hourto').val() != "" && isNaN($('#s_hourto').val())== false){
		l_to = $('#s_hourto').val();
	}else{
		l_to = "00";
	}
	if ($('#s_muniteto').val() != "" && isNaN($('#s_muniteto').val())== false){
		l_to += ":"+$('#s_muniteto').val();	
	}else{
		l_to += ":00";
	}
	if ($('#s_secondto').val() != "" && isNaN($('#s_secondto').val())== false){
		l_to += ":"+$('#s_secondto').val();	
	}else{
		l_to += ":00";
	}
	
	m_fromdate = m_fromdate+" "+l_from;
	m_todate = m_todate+" "+l_to;
	if (m_fromdate!==""){
		$('body').css('cursor','wait');
		$.ajax({url:"ajax_trace.php", data:{ m_fromdate:m_fromdate , m_todate:m_todate, carnumber:carnumber,winH:winH} , success:function(result){
				$('body').css('cursor','auto');
				if(result.indexOf('<tr')>-1){
					$("#mycontent").empty();
					$("#mycontent").html(result);
					ScrollTable();
				}else{
					$("#tablebody tr").remove();
					ScrollTable();
				}
				
		}});
		$("table#tableheader th[name='th1']").attr('pages',"1");
		$("table#tableheader th[name='th2']").attr('pages',"1");
		$("table#tableheader th[name='th3']").attr('pages',"1");
		$("table#tableheader th[name='th4']").attr('pages',"1");
	}
}

function OnPagging(m_fromdate,m_todate,carnumber,pageNum,rows_per_page,number_of_page){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	var winH = parseInt(winHf - temp.top - 25);
	$('body').css('cursor','wait');
	$.ajax({url:"ajax_tracepaggging.php", data:{ m_fromdate:m_fromdate , m_todate:m_todate, carnumber:carnumber,pageNum:pageNum,rows_per_page:rows_per_page,number_of_page:number_of_page,winH:winH } , success:function(result){
		$('body').css('cursor','auto');
		//alert();
		if(result.indexOf('<tr')>-1){
			$("#mycontent").empty();
			$("#mycontent").html(result);
			ScrollTable();
		}else{
			$("#tablebody tr").remove();
			ScrollTable();
		}

		$("table#tableheader th[name='th1']").attr('pages',pageNum);
		$("table#tableheader th[name='th2']").attr('pages',pageNum);
		$("table#tableheader th[name='th3']").attr('pages',pageNum);
		$("table#tableheader th[name='th4']").attr('pages',pageNum);
		
	}});	
	
}

function OnTraceSort(ele,rows_per_page){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	var winH = parseInt(winHf - temp.top - 25);
	flag = $(ele).attr('values');
	var pageNum = $(ele).attr('pages');;
	if (flag=='10') {
		$(ele).attr('values','11');
	}else if(flag=='11'){
		$(ele).attr('values','10');
	}
	else if(flag=='20'){
		$(ele).attr('values','21');
	}else if(flag=='21'){
		$(ele).attr('values','20');
	}
	else if(flag=='30'){
		$(ele).attr('values','31');
	}else if(flag=='31'){
		$(ele).attr('values','30');
	}
	else if(flag=='40'){
		$(ele).attr('values','41');
	}else if(flag=='41'){
		$(ele).attr('values','40');
	}
	$('body').css('cursor','wait');
	$.ajax({url:"ajax_tracesort.php", data:{flag:flag,pageNum:pageNum,rows_per_page:rows_per_page,winH:winH} , success:function(result){
		$('body').css('cursor','auto');
		if(result.indexOf('<tr')>-1){
			$("#mycontent").empty();
			$("#mycontent").html(result);
			ScrollTable();
		}else{
			$("#tablebody tr").remove();
			ScrollTable();
		}
		
	}});
}

function loadpos(){
	var winHf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	temp = $("#divscroll").position();
	$("#divscroll").css("height",parseInt(winHf - temp.top - 25));
}

</script>

</head>
<?php include 'show_function_popup_carcrime.php';?>
<body onresize="MyResize()" onload="loadpos();load_popup_carCrime();">
<p id="maylya" ><input type="hidden"  id="mayly" name="mayly" /></p>
<?php include '../connection/connection_menu.php';
$monitor = $_REQUEST['monitor'];
$monitorname = $_REQUEST['monitorname'];
if (isset($_SESSION['monitor_menu'])) {
	$monitor = $_SESSION['monitor_menu'];
}
?>    
<?php include 'menu.php';?>
    <div id="submenu">
    	<ul class="asubmenu">
    		<li><a href="searchcarnums.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>"><?=$l_recognitionrate?></a></li>
        	<li><a href="carnums.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>"><?=$l_s_canums?></a></li>
            <li><a href="trace.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>"  class="asubmenuselect"><?=$l_s_trace?></a></li>
            <li><a href="cameras.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_camera?></a></li>
            <li><a href="searchs.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_searchs?></a></li>
            <li><a href="alarms.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_alarms?></a></li>
            <li><a href="users.php?monitor=<?=$monitor?>&monitorname=<?=$monitorname?>" ><?=$l_s_users?></a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <?php mysql_close($connection_menu);?>
    <div class="main">
    	<div style="width:100%;text-align: center;min-width:624px"  >
    		
    		<label style="color: white;"><?php echo $l_carnum?></label>
			<input type="text" class="intext" autofocus="autofocus" style="width:120px;height: 20px;vertical-align: top" id="s_carnum" name="s_carnum"/>
			
			<label></label>	
    		<span style="color: white;padding-left: 20px;"><?php echo $l_from?></span>
    		<input type="text" class="intext"  id="datepickerfrom" value="<?=$searchdate?>" style="width:100px;height: 20px;vertical-align: top"/>
    		<span style="padding-left: 10px;"><input class="intext"  style="width:20px;height:20px" type="text" value="00" name="s_hourfrom" id="s_hourfrom"/></span>
          	<label style="color: white;">:</label>
          	<span style="padding-left: 10px;"><input class="intext"  style="width:20px;height:20px" type="text" value="00" name="s_munitefrom" id="s_munitefrom"/></span>
          	<label style="color: white;">:</label>
          	<span style="padding-left: 10px;"><input class="intext"  style="width:20px;height:20px" type="text" value="00" name="s_secondfrom" id="s_secondfrom"/></span>
    				
    		<span style="color: white;padding-left: 20px;"><?php echo $l_to?></span>
    		<input type="text"  class="intext"  id="datepickerto" value="<?=$searchdate?>" style="width:100px;height: 20px;vertical-align: top"/>
    		<span style="padding-left: 10px;"><input class="intext"   style="width:20px;height:20px" type="text" value="23" name="s_hourto" id="s_hourto"/></span>
    		<label style="color: white;">:</label>
    		<span style="padding-left: 10px;"><input class="intext"   style="width:20px;height:20px" type="text" value="59" name="s_muniteto" id="s_muniteto"/></span>
    		<label style="color: white;">:</label>
    		<span style="padding-left: 10px;"><input class="intext"  style="width:20px;height:20px" type="text" value="59" name="s_secondto" id="s_secondto"/></span>
	    		
	    	<span  style="padding-left: 15px;"><input type="button" class="inbtn" value=">>" style="width:100px;height: 24px" onclick="OnSearch()" /></span>
    	</div>
    	<div style="width:100%;height:10px;"></div>
    	<div class="divtheader">
	    	<table  cellpadding="0" cellspacing="0" border="0" width="100%" class="tbchung" id="tableheader" style="border:none;margin-top:0; min-height: 20px">
	               <tr>
	                   <th width="25%" name="th1" style="cursor: pointer;color: #027acc" onclick="OnTraceSort(this,100)" pages="1" values="10">No</th>
	                   <th width="25%" name="th2" style="cursor: pointer;color: #027acc" onclick="OnTraceSort(this,100)" pages="1" values="20"><?=$l_cameraname?></th> 
	                   <th width="25%" name="th3" style="cursor: pointer;color: #027acc" onclick="OnTraceSort(this,100)" pages="1" values="30"><?=$l_carnum?></th>
	                   <th width="25%" name="th4" style="cursor: pointer;color: #027acc"  onclick="OnTraceSort(this,100)" pages="1" values="40" class="last"><?=$l_s_numbers?></th> 
	               </tr>
	        </table>
        </div>
        <div id="mycontent">
	        <div id="divscroll" style="overflow:scroll;overflow-x:hidden; width:100%; height:490px; background-color: #ffffff" >
	               <table  cellpadding="0" cellspacing="0" border="0" width="100%" class="tbchung" style="margin-top:0" id="tablebody">
						 <tbody>
						 </tbody>
	               </table>
	       </div>
       </div>
       
       <!-- div style="width:100%; padding:10 0" align="center">
       		<input type="button" class="inbtn" value="Trace" style="width:80px; height:26px" />
       </div -->
       
              
    </div>
    <?php include 'show_content_popup_carcrime.php';?>
</body>     
</html>